<template>
    <van-notice-bar
      scrollable
      color="#1989fa"
      background="#ecf9ff"
      left-icon="volume-o"
    >
      <span v-for="(item, index) in noticeList" :key="index" style="margin-right: 100px;">
      <van-tag :color="item.type?'red':'#07c160'">{{item.title}}</van-tag> {{item.content}}
      </span>
    </van-notice-bar>
  <div style="padding: 5px">
    <van-button
        type="primary"
        plain
        hairline
        icon="plus"
        size="large"
        @click="handleAdd"
        style="margin-top: 5px"
    >添加一条</van-button
    >
    <van-swipe-cell v-for="(item,index) in dataSource" :key="index">
      <van-cell is-link arrow-direction="left">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-space :size="20">
            <span class="custom-title">{{item.name}}</span>
            <van-tag type="primary" v-if="item.status === 1">进行中</van-tag>
            <van-tag type="success" v-else>已完成</van-tag></van-space>
        </template>
        <template #value>
          <span style="color: #888888" v-if="item.status === 0">{{formatISO8601Date(item.createTime) +' 至 '+ formatISO8601Date(item.endTime)}}</span>
          <span style="color: #888888" v-else>{{'开始于'+formatISO8601Date(item.createTime)}}</span>
        </template>
      </van-cell>
      <template #right>
        <van-button square type="danger" text="删除" @click="deletePark(item.id)"/>
        <van-button square type="success" text="完成" v-if="item.status === 1" @click="updatePark(item.id,0)"/>
        <van-button square type="primary" text="激活" v-else @click="updatePark(item.id,1)"/>
      </template>
    </van-swipe-cell>
    <van-divider>已经到最底啦</van-divider>
    <p style="height: 30px"></p>
  </div>
</template>
<script setup lang="ts" name="Home">
import { ref } from "vue";
import { useRouter } from "vue-router";
import park from '../../api/park.ts'
import {Notice, Park} from "../../type.ts";
import {showNotify} from "vant";
import {formatISO8601Date} from "../../utils";
const router = useRouter();
const activeName = ref(1);
function handleAdd() {
  router.push("/park/add");
}
const dataSource = ref<Park[]>([])
const notice = ref({
  message: "暂无公告",
  type:0
})
const noticeList = ref<Notice[]>([
  {
    title:'暂无公告',
    type:0,
  }
]);
function reload(){
  park.queryList().then((res:any)=>{
    dataSource.value = res
  })
  park.queryNotice().then((res:any)=>{
    noticeList.value = res
  })
}
reload()


function deletePark(id){
  park.deleteById(id).then(()=>{
    showNotify({type: "success", message: "删除成功"});
    reload()
  })
}

function updatePark(id,status){
  park.update({id,status}).then(()=>{
    showNotify({type: "success", message: "更新成功"});
    reload()
  })
}

</script>
